<template lang="pug">
div.page.page-login
  div.login-box
    h3.title 用户登录
    div.input-wrap
      div.icon
        img(src="~@/assets/images/icons/login-account.svg")
      input.username(placeholder="账号" v-model="formData.account")
    div.input-wrap
      div.icon
        img(src="~@/assets/images/icons/login-password.svg")
      input.password(placeholder="密码" type="password" v-model="formData.password")
    div.button-submit(@click="submit")
      img.loading(v-if="loading" src="~@/assets/images/icons/loading.svg")
      span(v-else) 登&emsp;&emsp;录
</template>

<script>
import {mapGetters, mapMutations} from "vuex";

export default {
  name: "index",
  data() {
    return {
      formData: {
        account: 'admin',
        password: '',
      },
      loading: false,
    }
  },
  computed: {
    ...mapGetters({
      authorization: 'auth/authorization',
    }),
  },
  methods: {
    ...mapMutations({
      setLoginState: 'auth/SET_LOGIN_STATE',
    }),
    submit() {
      if(this.formData.account === '') {
        alert('请输入账号');
        return false;
      }
      if(this.formData.password === '') {
        alert('请输入密码');
        return false;
      }
      this.loading = true;
      if(this.authorization.account === this.formData.account && this.authorization.password === this.formData.password) {
        setTimeout(() => {
          this.setLoginState(true);
          this.$router.replace({
            path: '/page1',
          });
        }, 3000);
      } else {
        setTimeout(() => {
          this.loading = false;
          alert('密码不正确');
          this.formData.password = '';
        }, 2000);
      }
    },
  },
  mounted() {
    this.setLoginState(false);
  }
}
</script>

<style lang="scss" scoped>
@keyframes rotate {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.page-login{
  background: linear-gradient(0deg, #094D6C 0%, #052B36 40.12%, #001116 100%);
  position: relative;
  .login-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -65%);
    padding: rem(60) rem(80) rem(100);
    background: rgba(0, 77, 98, 0.38);
    border: rem(2) solid #ddd;
    border-image: linear-gradient(rgba(5, 253, 187, 0.4), rgba(5, 253, 187, 0.1)) 20 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
    pointer-events: auto;

    .title{
      @include fontSie(36);
      color: #CAFCFF;
      margin-bottom: rem(50);
    }
    .input-wrap{
      border: rem(2) #05FDBB solid;
      height: rem(60);
      width: rem(400);
      display: flex;
      & + .input-wrap{
        margin-top: rem(35);
      }
      .icon{
        width: rem(60);
        display: flex;
        align-items: center;
        justify-content: center;
        img{
          width: rem(24);
          height: rem(24);
        }
      }
      input{
        flex: 1;
        border: unset;
        background-color: transparent;
        outline: none;
        color: #FFFFFF;
        @include fontSie(18);
        &::placeholder {
          color: #698B95;
        }
      }
    }
    .button-submit{
      margin-top: rem(40);
      @include fontSie(18);
      background-color: #05FDBB;
      width: rem(400);
      height: rem(65);
      line-height: rem(65);
      text-align: center;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      .loading{
        width: rem(40);
        height: rem(40);
        animation: rotate 1s infinite linear;
      }
    }
  }
}
</style>
